<script setup lang="ts">
import { ref } from 'vue'
import MyTable from './components/MyTable.vue'
// 方法1.
import type { Person } from './types/Person'
// 方法2.
// export interface Person {
//   id: number
//   name: string
//   age: number
// }
const list1 = ref<Person[]>([
  { id: 1, name: '张小花', age: 18 },
  { id: 2, name: '孙大明', age: 19 },
  { id: 3, name: '刘德忠', age: 17 },
])

const list2 = ref<Person[]>([
  { id: 1, name: '赵小云', age: 18 },
  { id: 2, name: '刘蓓蓓', age: 19 },
  { id: 3, name: '姜肖泰', age: 17 },
])
interface Item {
  id: number
  age: number
}
// 查看
const look = (item: Item) => {
  alert(JSON.stringify(item))
}
// 查看
const delItemById = (id: number) => {
  // alert(id)
  list2.value = list2.value.filter((item) => item.id != id)
}
</script>

<template>
  <!-- 注意 父组件传入子组件的属性名在接收时一致 -->
  <MyTable :data="list1">
    <!-- 具名插槽 方式1 -->
    <!--  item的类型 {id:number,age:number}-->
    <!-- 接受全部属性 -->
    <template #footer="item">
      <button @click="look(item)">查看</button>
    </template>
  </MyTable>
  <MyTable :data="list2">
    <!-- 具名插槽 方式2 -->
    <!-- 单独接受一个属性 -->
    <template v-slot:footer="{ id }">
      <button @click="delItemById(id)">删除</button>
    </template>
  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}
</style>
